<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"">
<title>Create A News Page</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/plugin/Jcrop/jquery.Jcrop.min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/plugin/uploadify/uploadify.css" />

<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/plugin/Jcrop/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/plugin/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/plugin/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "../../resources/plugin/tinymce/lists/template_list.js",
        external_link_list_url : "../../resources/plugin/tinymce/lists/link_list.js",
        external_image_list_url : "../../resources/plugin/tinymce/lists/image_list.js",
        media_external_list_url : "../../resources/plugin/tinymce/lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>

<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

</style>
</head>

<body>
	<p>Create a news page: </p>	
	<form:form action="." method="post" modelAttribute="newsCreateFormTransmitter" enctype="multipart/form-data">
		<table>
			<tr>
				<td>新闻标题:</td>
				<td><form:input path="newsInfoModel.title" /></td>
			</tr>
			<tr>
				<td>摘要:</td>
				<td><form:input path="newsInfoModel.digest" /></td>
			</tr>
			<tr>
				<td>作者:</td>
				<td><form:input path="newsInfoModel.author_name" /></td>
			</tr>
			<tr>
				<td>首页展示图:</td>
				<td><input type="file" name="slider" /></td>
			</tr>
			<tr>
				<td colspan="2"><img id="target" src="<%=request.getContextPath()%>/resources/images/test1.jpg" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="preview-pane">
					    <div class="preview-container">
					      <img src="<%=request.getContextPath()%>/resources/images/test1.jpg" class="jcrop-preview" alt="Preview" />
					    </div>
					  </div>
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="file" name="file_upload" id="file_upload" /></td>
			</tr>
			<tr>
				<td>附件1:</td>
				<td><input type="file" name="files[0]" /></td>
			</tr>
			<tr>
				<td>附件2:</td>
				<td><input type="file" name="files[1]" /></td>
			</tr>
			<tr>
				<td>内容:</td>
				<td><textarea name="content"></textarea></td>
			</tr>
			<tr>
				<td>置顶:</td>
				<td>是: <form:radiobutton path="newsInfoModel.top" value="1" /><br>
					否: <form:radiobutton path="newsInfoModel.top" value="0" /></td>
			</tr>
			<tr colspan="2">
				<td><input type="submit" value="Submit"></td>
			</tr>
		</table>
	</form:form>
<script type="text/javascript">
$(function(){
	$pcnt = $('#preview-pane .preview-container');
	$pimg = $('#preview-pane .preview-container img');
	xsize = $pcnt.width();
    ysize = $pcnt.height();
	$("#target").Jcrop({
		allowSelect:false,
		allowResize:false,
		onChange: updatePreview
	},function(){
		var bounds = this.getBounds();
	    boundx = bounds[0];
	    boundy = bounds[1];
		this.animateTo([0,0,100,100]);
	});
	function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };
    
    $("#file_upload").uploadify({
    	'removeCompleted' : false, 
    	"swf"		:"<%=request.getContextPath()%>/resources/plugin/uploadify/uploadify.swf",
    	"uploader"	:"<%=request.getContextPath()%>/resources/plugin/uploadify/uploadify.php"
    });
});
</script>
</body>
</html>